<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../ui/dao.ui.js" type="text/javascript"></script>
    <link href="../ui/dao.ui.css" rel="stylesheet"/>
    <link href="index.css" rel="stylesheet"/>
</head>
<body>
<div class="dao-shadow" style="opacity: 08"></div>
<div class="testhtml">
    <textarea id="txt" style="resize: none;width: 600px;height: 150px;"></textarea>
    <div style="margin-top: 20px;">
        <a style="margin-left: 150px;" class="dao-btn dao-btn-success" id="okhtml">确定</a>
        <a style="margin-left: 150px;" class="dao-btn dao-btn-color-aabbcc" id="cancelhtml">返回</a>
    </div>
    <div id="showhtml" style="margin-top: 20px;">

    </div>
</div>

<div><h1 style="text-align:center;font-family:华文琥珀;">
    ========================================分页==============================================</h1></div>
<div class="page"></div>
<a class="dao-btn dao-btn-success" id="pagehtml">测试一下</a>
<pre style="font-size: 20px;">
    示例：

        html     &lt;div class="page"&gt;&lt;/div&gt;

        script:

           var createPage = function (showpage, pagestart) {
                $('.page').daoPage({
                    showpage: showpage,
                    pagestart: pagestart,
                    pagetotal: 1000,
                    toPage: function (page, pagesize) {
                        createPage(pagesize, page, 1000)
                    }
                });
            }
            createPage(10, 1);

    说明:(以下都是默认的样式或属性)
        bgcolor: '#6acdbe',//背景颜色
        bghovercolor: '#390040',//鼠标悬浮北京颜色
        bgshowcolor: '#03401d',//当前页背景颜色
        fontcolor: '#03401d',//字体颜色
        defaultbgcolor: '#2F4F4F',//输入框背景颜色
        defaultcolor: '#E0FFFF',//输入框字体颜色
        showpage: 7,//默认显示页码数量
        pagestart: 1,//当前页
        pagetotal: 10,//总页数
        pagesize: 10,//当前页面大小
        toPage: function () {//点击页码回调函数，返回点击的页码 page 和当前页面大小 pagesize;
            return false;
        }

</pre>

<div><h1 style="text-align:center;font-family:华文琥珀;">
    ========================================效果==============================================</h1></div>
<div id="effct">
    <div class="dao-gradient dao-btn-success">鼠标移到此处显示渐变效果</div>
    <div class="dao-gradient-time-2.5 dao-btn-info">鼠标移到此处显示自定义时间渐变效果</div>
    <div class="dao-rotate dao-gradient" style="background-color: #ff28cd;">鼠标移到此处显示旋转360度效果</div>
    <div class="dao-rotate-half dao-gradient" style="background-color: #16f3f5;">鼠标移到此处显示旋转180度效果</div>
    <div class="dao-rotate-num-123  dao-gradient" style="background-color: #bd13f5;">鼠标移到此处显示自定义角度旋转效果</div>
    <div class="dao-scale-lager  dao-gradient" style="background-color: #82ffd6;">鼠标移到此处显示变大效果</div>
    <div class="dao-scale-small dao-gradient" style="background-color: #35a696;">鼠标移到此处显示变小效果</div>
    <div class="dao-scale-num-2.3  dao-gradient" style="background-color: #3c39f5;">鼠标移到此处显示自定义大小效果</div>
    <div class="dao-rotate-scale dao-gradient-time-4.5" style="background-color: #a688f5;">旋转并放大</div>
    <div class="dao-rotate-scale-num-2.5-3600 dao-gradient-time-4.5" style="background-color: #c8cef5;">自定义角度自定义放大倍数
    </div>

</div>
<pre style="font-size: 20px;">

    示例:

        1.&lt;div class="dao-gradient dao-btn-success"&gt;鼠标移到此处显示渐变效果&lt;/div&gt;

        2.&lt;div class="dao-gradient-time-2.5 dao-btn-info"&gt;鼠标移到此处显示自定义时间渐变效果&lt;/div&gt;

        3.&lt;div class="dao-rotate dao-gradient" style="background-color: #ff28cd;"&gt;鼠标移到此处显示旋转360度效果&lt;/div&gt;

        4.&lt;div class="dao-rotate-half dao-gradient" style="background-color: #2192f5;"&gt;鼠标移到此处显示旋转180度效果&lt;/div&gt;

        5.&lt;div class="dao-rotate-num-123  dao-gradient" style="background-color: #bd13f5;"&gt;鼠标移到此处显示自定义角度旋转效果&lt;/div&gt;

        6.&lt;div class="dao-scale-lager dao-gradient" style="background-color: #82ffd6;"&gt;鼠标移到此处显示变大效果&lt;/div&gt;

        7.&lt;div class="dao-scale-small dao-gradient" style="background-color: #35a696;"&gt;鼠标移到此处显示变小效果&lt;/div&gt;

        8.&lt;div class="dao-scale-num-2.3 dao-gradient" style="background-color: #3c39f5;"&gt;鼠标移到此处显示自定义大小效果&lt;/div&gt;

        9.&lt;div class="dao-rotate-scale dao-gradient-time-4.5" style="background-color: #a688f5;"&gt;旋转并放大&lt;/div&gt;

        10.&lt;div class="dao-rotate-scale-num-2.5-3600 dao-gradient-time-4.5" style="background-color: #c8cef5;"&gt;自定义角度自定义放大倍数&lt;/div&gt;

    样式说明：

        1.渐变效果 class="dao-gradient"

        2.自定义渐变时间 class="dao-gradient-time-2.5"

        3.360度旋转 class="dao-rotate"

        4.180度旋转 class="dao-rotate-half"

        5.自定义角度旋转 class="dao-rotate-num-123"

        6.放大效果 class="dao-scale-lager"

        7.缩小效果 class="dao-scale-small"

        8.自定义缩放效果 class="dao-scale-num-2.3"

        9.旋转并放大 class="dao-rotate-scale"

        10.自定义角度和放大倍数 class="class="dao-rotate-scale-num-2.5-3600" 【2.5倍旋转3600度】

</pre>

<div><h1 style="text-align:center;font-family:华文琥珀;">
    ========================================按钮==============================================</h1></div>
<div style="width: 450px;margin: auto">
    <a class="dao-btn dao-btn-default  dao-gradient">默认</a>
    <a class="dao-btn dao-btn-info  dao-gradient">消息</a>
    <a class="dao-btn dao-btn-wraning dao-gradient">警告</a>
    <a class="dao-btn dao-btn-error dao-gradient">错误</a>
    <a class="dao-btn dao-btn-success dao-gradient" title="这是成功按钮">成功</a>
    <a class="dao-btn dao-btn-color-123456 dao-gradient">自定义颜色按钮</a>
</div>

<pre style="font-size: 20px;">

    示例：

        1.&lt;a class="dao-btn dao-btn-default  dao-gradient"&gt;默认&lt;/a&gt;

        2.&lt;a class="dao-btn dao-btn-info  dao-gradient"&gt;消息&lt;/a&gt;

        3.&lt;a class="dao-btn dao-btn-wraning dao-gradient"&gt;警告&lt;/a&gt;

        4.&lt;a class="dao-btn dao-btn-error dao-gradient"&gt;错误&lt;/a&gt;

        5.&lt;a class="dao-btn dao-btn-success dao-gradient" title="这是成功按钮"&gt;成功&lt;/a&gt;

        6.&lt;a class="dao-btn dao-btn-color-123456 dao-gradient"&gt;自定义颜色按钮&lt;/a&gt;

    说明：

        1.默认按钮样式 class="dao-btn dao-btn-default"

        2.消息按钮样式 class="dao-btn dao-btn-info"

        3.警告按钮样式 class="dao-btn dao-btn-wraning"

        4.错误按钮样式 class="dao-btn dao-btn-error"

        5.成功按钮样式 class="dao-btn dao-btn-success"

        6.自定义颜色按钮 class="dao-btn dao-btn-color-123456"


</pre>

<div><h1 style="text-align:center;font-family:华文琥珀;">
    ========================================弹出框==============================================</h1></div>
<div style="width: 300px;margin: auto">
    <a class="dao-btn dao-btn-default dao-alert dao-gradient" dao-title="请点击我，弹出一个消息提醒框"
       dao-title-detail="position:left;">Alert</a>
    <a class="dao-btn dao-btn-info dao-message dao-gradient" dao-title="请点击我，弹出一个信息确认框"
       dao-title-detail="position:top;color:#ABCDEF">Message</a>
    <a class="dao-btn dao-btn-error dao-other dao-gradient" dao-title="请点击我，弹出一个自定义的框框"
       dao-title-detail="position:right;color:#A12DEF">Other</a>
</div>


<div><h1 style="text-align:center;font-family:华文琥珀;">
    ========================================悬浮提示==============================================</h1></div>
<div style="margin: auto;width: 400px;">
    <a class="dao-btn dao-btn-success dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
       dao-title-detail="position:left;opacity:0.75">左侧显示</a>
    <a class="dao-btn dao-btn-success dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
       dao-title-detail="position:top;width:350">顶部显示</a>
    <a class="dao-btn dao-btn-success dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
       dao-title-detail="position:bottom;color:#1effc9">下端显示</a>
    <a class="dao-btn dao-btn-success dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
       dao-title-detail="position:right;width:700">右侧显示</a>


</div>
<pre style="font-size: 20px;">

    直接在元素上写属性配置：

        1.&lt;a class="dao-btn dao-btn-default dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
            dao-title-detail="position:left;opacity:0.75"&gt;左侧显示&lt;/a&gt;

        2.&lt;a class="dao-btn dao-btn-default dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
            dao-title-detail="position:top;width:350"&gt;顶部显示&lt;/a&gt;

        3.&lt;a class="dao-btn dao-btn-default dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
            dao-title-detail="position:bottom;color:#1effc9"&gt;下端显示&lt;/a&gt;

        4.&lt;a class="dao-btn dao-btn-default dao-gradient" dao-title="万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导万物皆导"
            dao-title-detail="position:right;width:700"&gt;右侧显示&lt;/a&gt;


        元素配置说明：

            1.dao-title 显示提示的信息

            2.dao-title-detail 配置提示语的样式

                position:位置（top(默认),bottom,right,left）,

                color: 背景色 默认-'#03401d',

                width: 提示语宽度 默认-130,

                disappear:提示语消失方式，默认-'hover'

                opacity:透明度

    用 js 实现：

        1.$('.dao-btn-wraning ').daoToolTip({disappear:2000,msg:'这是警告按钮',color:'#ff9f1d'})

        2.$('.dao-btn-success ').daoToolTip({position:'bottom',msg:'这是成功按钮',color:'#148b00'})

        3.$('.dao-btn-error ').daoToolTip({disappear:'other',position:'right',msg:'这是错误按钮',color:'#8b0f54'})

        属性配置说明

                msg:显示的内容

                position:位置（top(默认),bottom,right,left）,

                color: 背景色 默认-'#03401d',

                width: 提示语宽度 默认-130,

                disappear:提示语消失方式，默认-'hover'

</pre>

<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================列表==============================================</h1>
</div>
<div>
    <ul>
        <li>万物皆导</li>
        <li>万物皆导</li>
        <li>万物皆导</li>
    </ul>

    <ol>
        <li>万物皆导</li>
        <li>万物皆导</li>
        <li>万物皆导</li>
    </ol>

    <dl>
        <dt>万物皆导</dt>
        <dt>万物皆导</dt>
        <dt>万物皆导</dt>
    </dl>

</div>


<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================表格==============================================</h1>
</div>
<div style="margin: auto;width: 400px;">

<table class="dao-table">
    <caption>表格名称</caption>
    <thead>
        <tr>
            <th>时间</th>
            <th>姓名</th>
            <th>事由</th>
            <th>是否批准</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>万物皆导</td>
            <td>去宇宙深区</td>
            <td>是</td>
        </tr>
        <tr>
            <td>4</td>
            <td>万物皆导</td>
            <td>去宇宙深区</td>
            <td>是</td>
        </tr>
        <tr>
            <td>4</td>
            <td>万物皆导</td>
            <td>去宇宙深区</td>
            <td>是</td>
        </tr>
        <tr>
            <td>4</td>
            <td>万物皆导</td>
            <td>去宇宙深区</td>
            <td>是</td>
        </tr>
    </tbody>
</table>
</div>
<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================表单==============================================</h1>
</div>
<div>

</div>

<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================表单验证==============================================</h1>
</div>
<div>

</div>

<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================过度效果，进度条==============================================</h1>
</div>
<div>
</div>


<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================ajax封装数据==============================================</h1>
</div>
<div>
</div>


<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================ajax渲染数据==============================================</h1>
</div>
<div>
</div>

<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================导航栏==============================================</h1>
</div>
<div>
</div>


<div>
    <h1 style="text-align:center;font-family:华文琥珀;">
        ========================================快速布局==============================================</h1>
</div>
<div>
</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>